<template>
    <div class="manageBird">
        <el-container>
            <el-header height='0'>
                
            </el-header>
            <el-main>
                <el-button  type="primary" style="float: left;background-color: #009688;" @click='add'>新增</el-button>
                <!-- action="/bird-system/sentence/birdSentences/importExcel"  :http-request="uploadFile"-->
                <el-upload
                    class="upload-demo"
                    :action="url"
                    :headers="headers"
                    :limit="1"
                    accept=".xls, .xlsx"
                    :on-success="onSuccess"
                    >
                    <el-button  style="float: left;background-color: #009688;height: 40px;margin-left: 25px;width: 70px;" size="small" type="primary">导入</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                  </el-upload>
                <!-- <el-button type="primary" style="float: left;background-color: #009688;" @click='importFile'>导入</el-button> -->
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                    label="鸟类别"
                   >
                    <template slot-scope="scope">
                        <!-- <i class="el-icon-time"></i> -->
                        <span style="margin-left: 10px">{{ scope.row.birdName }}</span>
                    </template>
                    </el-table-column>
                    <el-table-column
                    label="内容"
                   >
                    <template slot-scope="scope">
                            <div v-html='scope.row.birdSentence'></div>
                    </template>
                    </el-table-column>
                    <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        style="background-color: #009688;color:white"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    style='text-align: right;margin-top: 10px;'
                    @current-change="handleCurrentChange">
                </el-pagination>
            </el-main>
        </el-container>
        <add-form  ref='addForm' @success='success'/>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
  import addForm from './addForm'
  export default {
    name: 'manageBird',
    data () {
      return {
        tableData: [],
        total:1,
        pageNo:1,
        pageSize:10,
        url:'',
        headers:{}
      }
    },
    components:{ 
        addForm
    },
    created() {
      const date =  Date.parse(new Date())
      this.url= `/bird-system/sentence/birdSentences/importExcel?_time=${date}`
      this.headers = {
        'X-Access-Token': this.$md5('04d2b9c8e69d11ebba5700ff9c30bc21,' + date)
      }
      axios.get('/api/checklogin').then(res=>{
        console.log(Number(res.data.result))
        if(Number(res.data.result) !== 200) {
          // window.location.protocol + window.location.host +
          window.location.href =  '/admin_lwj_sys/login/index.html'
        }
      })
      this.getBirdList()
    },
    methods: {
      getBirdList() {
        axios.get('/bird-system/sentence/birdSentences/list',{
                params:{
                    pageNo: this.pageNo,
                    pageSize: this.pageSize,
                    column: 'id',
                    order:'desc'
                }
            }).then(res=>{
                this.tableData = res.data.result.records
                this.total = res.data.result.total
        })
      },
      uploadFile(params) {
      const _file = params.file;

        // 通过 FormData 对象上传文件
        var formData = new FormData();
        formData.append("file", _file);
        debugger
        axios.post('/bird-system/sentence/birdSentences/importExcel',formData).then(res=>{

        })
      },
      onSuccess() {
        this.getBirdList()
      },
      handleEdit(index, row) {
        console.log(index, row);
        this.$refs.addForm.edit(row)
      },
      handleDelete(index, row) {
        const _t = this
        _t.$confirm('是否确定删除鸟语?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            axios.delete(`/bird-system/sentence/birdSentences/delete/?id=${row.id}`).then(res=>{
                _t.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.getBirdList()
            })
        }).catch(() => {
          _t.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        
      },
      handleCurrentChange(v){
        this.pageNo = v
        this.getBirdList()
      },
      add() {
        this.$refs.addForm.open()
      },
      importFile() {

      },
      success() {
        this.getBirdList()
      }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style>
    .el-table td,.el-table th {
      padding: 5px 0;
    }
    .el-table__header tr th {
      height: 60px;
      background-color: #e6e6e6;
      font-size: 16px;
    }
  </style>
  